/* 

(°▽°)/

hello there and welcome to my CSS file. I hope you like it here. 
It's a constant work in progress but I try to keep things as tidy as I can. Grab a cuppa. 

*/

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,1);
}

html, body {
	font-family: 'Lexend deca', sans-serif;
	font-size: 1rem;	
	background-color: #202020;
    height: 100%; /* height and width defined twice for mobile browser viewport fix */
    width: 100%;	
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;	
    overflow-x:hidden; /* hide horizontal scrollbars if content overflows */
}


blockquote {
	font-size: 1.3rem;	
	color: #fff;
    margin: 2rem;
    padding-left: 1rem;    
    border-left-style: solid;
    border-left-color: #fff;
}

#wrapper {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    margin:0;
	overflow-y: auto; /* content to scroll normally: */
    overflow-x: hidden!important;

}


.decorative_image {
    max-height: 25rem;
    max-width: 25rem;
}

.image_source {
	font-size: 1rem;	
	color: #fff;
    margin-bottom: 1rem;    
}

/* example box component */
.title_example {
    overflow-x: hidden!important;
    overflow-y: hidden!important;  
    border-radius: 20px 20px 0px 0px;
    height: 4rem;
    width: auto;
    border: 1px rgba(112,112,112,1);
    border-style: solid solid none solid;    
    padding-left: 1rem; 
    text-decoration: none!important;    
    background-color: #3c6597;
}

.h1_example {
    margin-top: 1rem;
    margin-bottom: 0.5rem;    
    font-size: 2rem;
	color: #fff;     

}


.h2_example {
    margin-top: 1rem;
    margin-bottom: 0.5rem;    
    font-size: 1.8rem;
	color: #fff;     

}


.h3_example {
    margin-top: 1rem;
    margin-bottom: 0.5rem;    
    font-size: 1.7rem;
	color: #fff;     

}


.h4_example {
    margin-top: 1rem;
    margin-bottom: 0.5rem;    
    font-size: 1.6rem;
	color: #fff;     

}

.example {
    overflow-x: hidden!important;
    overflow-y: hidden!important;  
    border-radius: 0px 0px 20px 20px;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(112,112,112,1);
	font-size: 1rem;	
	color: #fff; 
    padding: 1rem; 
    text-decoration: none!important;
    background-color: #303030;     
}



.example_button {  
	background-color: #fff;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 5rem;
	padding-right: 5rem;
    border-radius: 10px;	
	font-family: 'Lexend deca', sans-serif;
	font-weight: bold;
	color: #000;
	text-decoration: none;
    
    margin-bottom: 3rem;
}



/* think about it box component */
.title_think_about {
    overflow-x: hidden!important;
    overflow-y: hidden!important;  
    border-radius: 20px 20px 0px 0px;
    height: 4rem;
    width: auto;
    border: 1px rgba(112,112,112,1);
    border-style: solid solid none solid;    
    padding-left: 1rem; 
    text-decoration: none!important;    
    background-color: #97346C;
}

.h4_think_about {
    margin-top: 1rem;
    font-size: 1.618rem;
	color: #fff;     

}

.think_about {
    overflow-x: hidden!important;
    overflow-y: hidden!important;  
    border-radius: 0px 0px 20px 20px;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(112,112,112,1);
	font-size: 1rem;	
	color: #fff; 
    padding: 1rem; 
    text-decoration: none!important;
    background-color: #303030;     
}



.think_about_button {  
	background-color: #fff;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 5rem;
	padding-right: 5rem;
    border-radius: 10px;	
	font-family: 'Lexend deca', sans-serif;
	font-weight: bold;
	color: #000;
	text-decoration: none;
    
    margin-bottom: 3rem;
}

/* grid list component */

.grid_list_h3 {
    margin: 0rem 0 1.38rem;
}


.icon_thumbnail {
    overflow-x: hidden!important;
    overflow-y: hidden!important;  
    border-radius: 25px;
    min-height: 50px;
    min-width: 50px; 
    max-height: 13rem;
    max-width: 13rem;     
    transition: transform .2s; /* Animation */    
}



.icon_thumbnail:hover {
    transform: scale(1.05); /* (105% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    box-shadow: rgba(250, 250, 250, 0.55) 0px 5px 15px; 
}



/* hovering arrow buttons */

.arrow_fix{
    position: relative;
    z-index: 3;
}

.bi-arrow-down-circle-fill {
    color: #ffffff;
    transition: transform .2s; /* Animation */       
}

.bi-arrow-down-circle-fill:hover {
    color: #FC488D;
    transform: scale(1.05); /* (105% zoom - Note: if the zoom is too large, it will go outside of the viewport) */    
}









/* home page header */

header {
  position: relative;
  background-color: black;
  height: 90vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

.float{
	position: relative;
	width:60px;
	height:60px;
	top: -2rem;
	right:40px;
	color:#FFF;
	border-radius:50px;
	text-align:center;
}





/* headers for pages other than the site home page */

header.page_banner {
    background: url("../images/blurred_header.png") black no-repeat center center scroll;
    height: 25rem;  
    padding-top: 5rem;    
  }






/* font sizes and padding*/


h1, h2, h3, h4 {
    margin: 3rem 0 1.38rem;
	font-family: 'Lexend deca', sans-serif;
    font-weight: 400;
    line-height: 1.3;
}


h5 {
  margin: 3rem 0 1.38rem;
	font-family: 'Lexend deca', sans-serif;
  font-weight: 500;
  line-height: 1.3;  
}

p {
	font-size: 1rem;	
	color: #fff;
    margin-bottom: 1rem;    
}

ul {
	font-size: 1rem;	
	color: #fff;
    margin-bottom: 1rem;    
}


h1 {
	text-align: left;
	font-size: 5rem;
	color: #fff;
	font-family: 'Lexend deca', sans-serif;
	padding: 0px;
	margin: 0px;

}

h2 {
	text-align: left;
	font-size: 6.854rem; 
	color: #fff;
	font-family: 'Lexend deca', sans-serif;

}

h3 {
	text-align: left;
	font-size: 4.236rem;
	color: #fff;
	font-family: 'Lexend deca', sans-serif;

}

h4 {
	text-align: left;
	font-size: 2.618rem;
	color: #fff;
	font-family: 'Lexend deca', sans-serif;

}

h5 {
	text-align: left;
	font-size: 1.618rem;
	color: #fff;
	font-family: 'Lexend deca', sans-serif;

}



/*h2 box for quizzes */
.h2_box {
  border: 2px;

    border-bottom-width: 2px;
    border-bottom-style: solid;

  border-color: #fff !important;
}


/* site-wide buttons */

.btn {
	font-size: 1.2rem;
}

.btn-primary {
	border: none;
}

a.main_button{
	background-color: #ffffff;
    border-radius: 10px;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 5rem;
	padding-right: 5rem;
	margin-top: 20px;
	
	font-family: 'Lexend deca', sans-serif;
	font-weight: bold;
	color: #202020;
	text-decoration: none;
}


a.main_button:hover{
	background-color: #FC488D;
	color: #202020!important;
	text-decoration: none;
}














/* navbar toggler customisation */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border: none;
    
} 



/* full-screen navbar menu */

.offcanvas {
    min-height: 100vh;
}

.offcanvas {
    padding: 0;
    margin: 0;
}

.offcanvas-body {
	background-color: #000000;
	color: #ffffff;
    width: 100vw;
}

.offcanvas-header {
	background-color: #000000;	
	color: #ffffff;	
    margin: 0;
    height: 4rem;
}

.offcanvas-title {
	background-color: #000000;	
	color: #ffffff;	
    margin: 0;
    padding: 0;
}

li.offcanvas {
	background-color: #000000;	
	color: #ffffff;	
}


.dropdown-menu-dark {
	background-color: #000000;	
	color: #ffffff;	
}

.navbar {
	background-color: #000000!important;
  	padding-top: 1rem;
  	padding-bottom: 1rem;	
    border-bottom: 1px solid #202020; 
    position: sticky; /*navbar overflowing onto scrollbar in firefox fix */
}

.dropdown-divider {
    background-color: #ffffff;
    opacity: 50;
}

.btn-close-white {
    opacity: 50;
}


.nav-link {
    color: #fff;
}


a {
    color: #fff;    
}


.no_underline {
    color: #fff;
    text-decoration: none;    
}


a:hover {
	text-decoration: underline;
	color: #FC488D!important;    
}

a.nav-link:hover {
    color: #fff;
}


/* card collection component */

.card {
    overflow-x: hidden!important;
    overflow-y: hidden!important;  
    border-radius: 50px;
    height: 25rem;
    width: 25rem;
    border-color: #707070;
    transition: transform .2s; /* Animation */  
}


.card-text {
	font-size: 1rem;	
	color: #000;
    padding-left: 1rem;    
    padding-bottom: 2rem;
    text-decoration: none!important;
}

.card-title {	
	color: #000;
    padding-top: 12.5rem;
    padding-left: 1rem;
}

.card-body {
    background: no-repeat center center scroll; 
    background-color: #202020;   
    text-decoration: none;    
}


.card_suggestions_title {
	color: #fff;
    padding-top: 2rem;
    padding-left: 0rem;   
    text-align: center;
}

.card_suggestions_text {
	font-size: 1rem;	
	color: #fff; 
    padding-bottom: 1rem;
    padding-left: 0rem; 
}

.card_button {  
	background-color: #fff;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 5rem;
	padding-right: 5rem;
    border-radius: 10px;	
	font-family: 'Lexend deca', sans-serif;
	font-weight: bold;
	color: #000;
	text-decoration: none;
    
    margin-bottom: 3rem;
}

.card_link {
    text-decoration: none;
    color: #000;
}

.card_link:hover {
    text-decoration: none;
    color: #000;
}



.card:hover {
    transform: scale(1.05); /* (105% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    box-shadow: rgba(250, 250, 250, 0.55) 0px 5px 15px; 
    text-decoration: none;    
}

.card-text:hover {  
    text-decoration: none;    
}

.card_button:hover {  
	background-color: #FC488D;
	color: #202020!important;
	text-decoration: none;
}


.card_no_underline {
  color: #000;
  text-decoration: none;
}

.card_no_underline:hover {
  color: #000;
  text-decoration: none;
}

a.card_no_underline:hover {
  color: #000!important;
  text-decoration: none;
}



/* footer */

.footer_banner {
  position: relative;
  background-color: black;
  height: 275px;
  min-height: 275px;
  width: 100%;
  overflow: hidden;    
    background: url("../images/footer banner.png") black no-repeat center center scroll;    
}

.footer {
	background-color: #202020;
	color: #ffffff;
	margin-top: 5rem !important;
}

a.footer {
	color: #ffffff!important;
}


a.footer_button{
	background-color: #ffffff;
	border-radius: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-top: 20px;
	
	text-transform: uppercase;
	font-family: 'Lexend deca', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color: #404040;
	text-decoration: none;
}


a.footer_button:hover{
	background-color: #ed572f;
	color: #ffffff;
	text-decoration: none;
}

/* icons in footer*/
.bi {
	font-size: 1.5rem;
}



/* media-query hellscape */


/* abandon hope all ye who enter here */





/*                                       ┻━┻ ︵ヽ(`Д´)ﾉ︵ ┻━┻                               */






/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
           
    
	.navbar-brand	{
		font-size: 1rem;
	}  

    .offcanvas-title   {
        font-size: 1rem;
    }

    p, li {
	font-size: 1.1rem;	
    }     
    
    h2 {font-size: 3rem;}    

    h3 {font-size: 2.369rem;}

    h4 {font-size: 1.777rem;}

    h5 {font-size: 1.333rem;}

    small, .text_small {font-size: 0.75rem;}   
    
     header.page_banner {
    height: 25rem;  
    padding-top: 3rem;    
    }   
 
    .card {
    height: 100%;
    width: 100%;
    }  
    
    .card_suggestions_title {
    padding-top: 0rem;
    padding-left: 0rem;   
    text-align: center;
    }    
    
    .decorative_image {
    height: 20rem;
    width: 20rem;
    }    
    
    
    }


/* Fix for iPhone SE second gen - why have you done this to me Apple? I LOVED YOU. */
@media (max-width: 668px) { 
           
    
	.navbar-brand	{
		font-size: 1rem;
	}  

    .offcanvas-title   {
        font-size: 1rem;
    }

    p, li {
	font-size: 1.1rem;	
    }     
    
    h2 {font-size: 3rem;}    

    h3 {font-size: 2.369rem;}

    h4 {font-size: 1.777rem;}

    h5 {font-size: 1.333rem;}

    small, .text_small {font-size: 0.75rem;} 
    
     header.page_banner {
    height: 25rem;  
    padding-top: 3rem;    
    }   
 
    .card {
    height: 100%;
    width: 100%;
    }  
    
    .card_suggestions_title {
    padding-top: 0rem;
    padding-left: 0rem;   
    text-align: center;
    }    
    
    .decorative_image {
    height: 20rem;
    width: 20rem;
    }    
 
    .decorative_image {
    height: 18rem;
    width: 18rem;
    }    
    
    
    }




/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) { 
           
    
	.navbar-brand	{
		font-size: 1rem;
	}  

    .offcanvas-title   {
        font-size: 1rem;
    }
    
    p, li {
	font-size: 1.1rem;	
    }     
    
    h2 {font-size: 3rem;}    

    h3 {font-size: 2.369rem;}

    h4 {font-size: 1.777rem;}

    h5 {font-size: 1.333rem;}

    small, .text_small {font-size: 0.75rem;}   
    
    header.page_banner {
    height: 25rem;  
    padding-top: 5rem;    
    }      
  
    }



/* Medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) { 

    	.navbar-brand	{
		font-size: 1.1rem;
	}  

    
    
h1 {
margin-top: 2rem;
font-size: 4.209rem;
}	

h2 {
	font-size: 6.854rem;
}

h3 {
	font-size: 4.236rem;
}

h4 {
	font-size: 2.618rem;
}

h5 {
	font-size: 1.618rem;
}


small, .text_small {font-size: 0.75rem;}
           
  .desktop_hidden {
    display: none;
  }     
    
   header.page_banner {
    height: 25rem;  
    padding-top: 5rem;    
  }     
    
}



/* DESKTOP */



/* Large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) {
    
     h1 {
        font-size: 10rem;
    }
    
    .h1_double {
        margin-top: 0.5rem; 
        font-size: 6rem;
    }    
    
  .desktop_hidden {
    display: none;
  }     
        
    
    }

/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 1399.98px) { 

      .desktop_hidden {
    display: none;
  }     
    
  
    
    }

/* XX-Large devices (larger desktops)
 No media query since the xxl breakpoint has no upper bound on its width */






/* Media Query for devices withi coarse pointers and no hover functionality */

/* Making sure the header video is hidden on mobile devices */

@media (pointer: coarse) and (hover: none) {

  header video {
    display: none;
  }
    
    .overlay_video {
    display: none;
  }      
   
   
}




@media (max-width: 1230px) { /* hiding navbar links on their own for reasons unkown */
  .hidden-nav {
    display: none;
  }
    
  
}





/* Media Query for devices with coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
    header {
    background: url("../images/blurred_header.png") black no-repeat center center scroll;
    height: 25rem;  
    
    }
    
    h1 {
    margin-top: 3rem;         
    font-size: 4rem; /* broken the pattern from 4.209rem to look better on iPhone SE second gen */
    }    

    header video {
    display: none;
    }
    
    .mobile_hidden {
    display: none;
    } 
    
    
    
    
    
/* iPhone SE second gen h1 margin fix */    
@media (max-width: 667px) and (pointer: coarse) {   
    
    h1 {
    margin-top: 3rem;        
    font-size: 4rem;
    }  
    
    .h1_double {
    margin-top: 1rem;        
    font-size: 4rem;        
    }
    
  header video {
    display: none;
  }
    
  .mobile_hidden {
    display: none;
  }     
    
}

    
 
}

/*                 ٩( ๑╹ ꇴ╹)۶            */


/* accessibility tricks and tweaks */

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}